<template>
  <div>
    <div class="list wrap" v-infinite-scroll="load" infinite-scroll-disabled="disabled"
    infinite-scroll-distance="10">
      <ElHeader></ElHeader>
      <el-container>
        <el-main class="body" style="width: 100%; overflow: hidden; padding: 0 !important">
          <div>
            <el-carousel :interval="5000" arrow="always" width="100%" height="600px">
              <el-carousel-item v-for="item in img_list" :key="item">
                <a href=""><img :src="item" alt="" /></a>
              </el-carousel-item>
            </el-carousel>
          </div>

          <template>
            <div class="trip">
              <el-form :rules="rules" :inline="true" class="demo-form-inline" width="900px">
                <a name="mer"></a>
                <el-form-item>
                  <el-select v-model="form.province" placeholder="请选择">
                    <el-option v-for="item in province" :key="item.pid" :label="item.pname" :value="item.pname">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="date1">
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker v-model="date1" type="date" placeholder="入住日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker v-model="date2" type="date" placeholder="退房日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button type="success">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="lvshe infinite-list-wrapper" style="overflow: auto">
              <a name="miao"></a>
              <template>
                <div class="lvshee">
                  <person v-for="(item, i) in hotel" :key="i" :avatar="item.himg" :name="item.hname"
                    :location="item.hlocation" @jump="jumpIn(item.hid, $event)"></person>
                  <p v-if="loading">加载中...</p>
                  <p v-if="noMore">没有更多了</p>
                </div>
              </template>
            </div>
          </template>
        </el-main>

        <!-- 侧边 -->
        <div class="nav-r">
          <ul class="guide-list">
            <!-- 个人中心 -->
            <li>
              <a href="/home/index" title="个人中心">
                <svg t="1669640977636" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="10919" width="40" height="40">
                  <path
                    d="M505 597.9c57.3-36.8 95.2-101 95.2-174.2 0-114.2-92.5-206.8-206.8-206.8s-206.8 92.5-206.8 206.8c0 73.1 38 137.4 95.2 174.2-108 42.3-184.3 144.8-184.3 268.3h60.7c7.4-123.6 110-216 235.4-216s228 92.4 235.4 216h60.5c-0.1-123.5-76.3-226-184.5-268.3zM243.9 423.8c0-81.6 66.1-147.8 147.8-147.8s147.8 66.1 147.8 147.8-66.1 147.8-147.8 147.8-147.8-66.2-147.8-147.8z"
                    p-id="10920"></path>
                  <path
                    d="M549.7 217H571l0.2-59.1h295.7c32.9 0 59.6 26.7 59.6 59.6v589.2c0 32.9-26.7 59.6-59.6 59.6H748.5V807H833c19 0 34.4-15.4 34.4-34.4V251.4c0-19-15.4-34.4-34.4-34.4H571.1"
                    p-id="10921"></path>
                  <path
                    d="M630.1 276.1h177.3v59.1H630.1v-59.1z m0 118.2h177.3v59.1H630.1v-59.1z m0 118.2h177.3v59.1H630.1v-59.1z m59.1 118.2h118.2v59.1H689.2v-59.1z"
                    p-id="10922"></path>
                </svg>
              </a>
            </li>
            <!-- 我的收藏星星 -->
            <li>
              <a href="/home/store" title="我的收藏">
                <svg t="1669649772532" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3109" width="40" height="40">
                  <path
                    d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24zM551.786667 756.032l170.976 106.24c2.624 1.621333 5.717333 2.122667 8.650666 1.408 6.410667-1.557333 10.56-8.426667 8.928-15.424l-46.485333-198.24a77.141333 77.141333 0 0 1 24.277333-75.733333L870.293333 441.706667c2.485333-2.165333 4.053333-5.312 4.330667-8.746667 0.565333-7.136-4.490667-13.173333-10.976-13.696l-199.712-16.288a75.989333 75.989333 0 0 1-64.064-47.168l-76.938667-188.16a12.309333 12.309333 0 0 0-6.538666-6.741333c-5.898667-2.496-12.725333 0.373333-15.328 6.741333l-76.949334 188.16a75.989333 75.989333 0 0 1-64.064 47.168l-199.701333 16.288a11.68 11.68 0 0 0-7.978667 4.181333 13.226667 13.226667 0 0 0 1.333334 18.261334l152.16 132.586666a77.141333 77.141333 0 0 1 24.277333 75.733334l-46.485333 198.229333a13.333333 13.333333 0 0 0 1.514666 9.877333c3.488 5.792 10.581333 7.530667 16.064 4.128l170.986667-106.229333a75.296 75.296 0 0 1 79.562667 0z"
                    p-id="3110"></path>
                </svg>
              </a>
            </li>
            <!-- 我的信息 -->
            <li>
              <a href="/home/xinxi" title="我的信息">
                <svg t="1669649725467" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2209" width="40" height="40">
                  <path
                    d="M856.798419 793.112446l-73.742515-129.741923L783.055904 401.843134c0-100.20112-75.31636-208.644971-185.111998-248.378927-5.348821-53.104475-40.835034-91.831498-87.334068-91.831498-46.434565 0-82.048691 38.728046-87.332021 91.831498-109.73424 39.733956-185.049576 148.176784-185.049576 248.378927l0 261.527388-77.329203 136.096654c-5.158487 8.997931-5.03262 20.008706 0.125867 28.944216 5.15951 8.933463 14.724353 14.346753 25.042349 14.346753l184.04162 0c13.528108 65.310472 71.353095 114.51308 140.501988 114.51308 69.213361 0 127.036301-49.202609 140.500964-114.51308l184.04162 0c0.505513 0 0.881067 0 1.322112 0 16.045441 0 29.007661-12.898775 29.007661-28.944216C865.482195 805.697065 862.209662 798.335401 856.798419 793.112446M510.609839 119.708406c10.444886 0 18.875906 7.927553 24.287149 19.756973-8.05342-0.818645-15.85613-2.705622-24.287149-2.705622s-16.232706 1.886977-24.287149 2.705622C491.734956 127.634936 500.165975 119.708406 510.609839 119.708406M510.609839 899.258974c-36.808324 0-67.576071-23.657816-79.532381-56.500828l159.062715 0C578.186933 875.600135 547.482631 899.258974 510.609839 899.258974M235.90022 784.807293l56.502875-99.476619c2.515287-4.28049 3.89982-9.314133 3.89982-14.34573L296.302915 401.843134c0-97.747231 91.611487-207.070102 214.306924-207.070102 122.694413 0 214.431767 109.322871 214.431767 207.070102L725.041606 670.984944c0 5.031597 1.322112 10.06524 3.774977 14.34573l56.565297 99.476619L235.90022 784.807293z"
                    p-id="2210"></path>
                </svg>
              </a>
            </li>
            <li class="ph">
              <el-tooltip class="tooltipp" effect="dark" content="热线电话：8888888" placement="left">
                <a href="" title="热线电话">
                  <svg t="1669641325949" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="14012" width="40" height="40">
                    <path
                      d="M874.268444 810.439111l-44.942222 45.454222c-34.133333 34.531556-81.578667 54.328889-130.275555 54.328889-20.821333 0-41.415111-3.527111-61.041778-10.467555a839.111111 839.111111 0 0 1-515.356445-528.896 182.954667 182.954667 0 0 1 63.032889-201.728l39.253334-29.923556A123.278222 123.278222 0 0 1 300.316444 113.777778a124.017778 124.017778 0 0 1 110.705778 67.584l66.389334 128.967111a86.869333 86.869333 0 0 1-13.312 98.531555l-13.824 15.018667a48.583111 48.583111 0 0 0-7.395556 55.068445 235.064889 235.064889 0 0 0 101.831111 101.717333 49.379556 49.379556 0 0 0 55.068445-7.395556l15.075555-13.767111a88.746667 88.746667 0 0 1 98.645333-13.368889l129.024 66.275556a124.017778 124.017778 0 0 1 31.744 198.030222z m-22.016-99.271111c0-40.96-173.852444-113.777778-173.852444-113.777778-24.462222-8.760889-58.026667 28.444444-58.026667 28.444445-60.416 43.918222-102.968889 10.581333-115.882666 0-37.717333-31.004444-89.031111-97.962667-115.882667-142.222223-20.138667-33.223111-11.548444-72.533333 0-85.333333 0 0 38.912-32.995556 28.956444-56.888889-30.378667-74.069333-77.824-183.751111-115.939555-170.666666-32.995556 10.638222-171.349333 55.694222-108.828445 220.273777 111.047111 291.726222 342.016 409.144889 482.645334 462.336 98.019556 7.054222 184.604444-114.403556 176.810666-142.222222z"
                      p-id="14013"></path>
                  </svg>
                </a>
              </el-tooltip>
            </li>
            <!-- 二维码 -->
            <li>
              <a title="官方二维码">
                <svg t="1669641370104" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="14962" width="40" height="40">
                  <path
                    d="M418.037 538.846H64.56a63.92 63.92 0 0 0-63.92 63.92v356.035a63.92 63.92 0 0 0 63.92 63.92h353.478a63.92 63.92 0 0 0 63.92-63.92V602.767a63.92 63.92 0 0 0-63.92-63.92z m0 419.955H64.56V602.767h353.478z"
                    p-id="14963"></path>
                  <path
                    d="M145.418 684.904h191.76v191.76h-191.76zM418.038 0H64.558A63.92 63.92 0 0 0 0.64 63.92v347.086a63.92 63.92 0 0 0 63.92 63.92h353.478a63.92 63.92 0 0 0 63.92-63.92V63.92A63.92 63.92 0 0 0 418.038 0z m0 411.006H64.558V63.92h353.478z"
                    p-id="14964"></path>
                  <path
                    d="M145.418 141.583h191.76v191.76h-191.76z m845.983 396.305H577.518a31.96 31.96 0 0 0-29.723 40.589v412.285a31.96 31.96 0 0 0 63.92 0V601.808h379.686a31.96 31.96 0 0 0 0-63.92zM959.44 0H609.798a63.92 63.92 0 0 0-63.92 63.92v347.086a63.92 63.92 0 0 0 63.92 63.92H959.44a63.92 63.92 0 0 0 63.92-63.92V63.92A63.92 63.92 0 0 0 959.44 0z m0 411.006H609.798V63.92H959.44z"
                    p-id="14965"></path>
                  <path
                    d="M688.74 141.583H880.5v191.76H688.74z m250.885 527.021h82.457v82.457h-82.457z m-220.204 0h-82.457v82.457h82.457v162.996h82.457V750.742H719.42v-82.138z m-82.457 272.62h82.457v82.456h-82.457z m181.533-231.71h82.457v82.456h-82.457z m-65.838-94.922h82.457v82.457H752.66zM815.62 936.11h82.457v82.457H815.62z m124.005-55.93h82.457V1024h-82.457z"
                    p-id="14966"></path>
                </svg>
              </a>
              <img src="" alt="" />
            </li>
          </ul>
        </div>
      </el-container>
      <ElFooter></ElFooter>
    </div>
  </div>
</template>

<script>
import Person from '@/components/Person.vue'
import Spot from '@/components/Spot.vue'
import ElFooter from '@/components/ElFooter.vue'
import ElHeader from '@/components/ElHeader.vue'
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user']),
  },
  components: { Person, Spot, ElFooter, ElHeader },
  data() {
    return {
      count: 10,
      loading: false,

      loginID: '',
      hotels: {
        page: '',
        total: '',
      }, // 绑定当前页面中显示的旅社列表数据(分页数据)

      hotel: {}, // 保存旅社
      rules: {
        date1: [{ required: true, message: '请选择入住日期', trigger: 'blur' }],
      },
      province: [], // 保存所有的省份
      proid: '4',
      form: {
        province: '石家庄',
      },
      img_list: [
        'http://www.yhachina.com/data/images/2018-07-02/5b39db2f01e23.jpg',
        'http://www.yhachina.com/data/images/2018-07-02/5b39db3b8c308.jpg',
        'http://www.yhachina.com/data/images/2018-07-02/5b39db4a5af97.jpg',
      ],
      input: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
      },
      date1: '',
      date2: '',
    }
  },

  // 页面挂载完毕后,加载资源
  mounted() {
    // 加载所有城市
    console.log('123',this.$http.dwApi.queryAll());
    this.$http.dwApi.queryAll().then(res => {
      console.log(res)
      this.province = res.data.data
    })

    // 加载当前城市的旅社
    this.$http.lsApi.queryCity({ page: 1, pagesize: 6 }).then(res => {
      console.log('旅社', res)
      this.hotel = res.data.data
      this.hotels.page = res.data.page
      this.hotels.total = res.data.total

      console.log(this.hotel)
    })

    // 获取用户名
    let loginID = JSON.parse(sessionStorage.getItem('user'))
    console.log('user', loginID)
    if (loginID.uname == '') {
      loginID = '登录'
    }
    this.loginID = loginID.uname
  },
  computed: {
    noMore() {
      console.log(
        'this.hotel.length',
        this.hotel.length,
        'this.hotels.total',
        this.hotels.total
      )
      return this.hotel.length >= this.hotels.total
    },
    disabled() {
      return this.loading || this.noMore
    },
  },

  methods: {
    load() {
      this.loading = true
      console.log('加载')
      setTimeout(() => {
        this.hotels.page++
        console.log('page', this.hotels.page)
        this.$http.lsApi
          .queryCity({ page: this.hotels.page, pagesize: 6 })
          .then(res => {
            console.log('酒店', res)
            this.hotel.push(...res.data.data)
            console.log(this.hotel)
          })
        this.loading = false
      }, 200)
    },
    jumpIn(id, parms) {
      console.log('房子编号', id)
      this.$router.push(`/hotellist/${id}`)
    },
  },
}
</script>

<style lang="scss">
.wrap {
  height: 100vh;
  overflow-y: auto;
}

body {
  margin: 0 !important;
}

.clearfix:after {
  content: '';
  display: table;
}

.el-main {
  padding: 0;
  margin-top: 15px;
}

.nav-r {

  a,
  ol,
  ul,
  li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: none;
    text-decoration: none;
    color: #1a1a1a;
  }

  position: fixed;
  right: 10px;
  top: 50%;
  margin-top: -150px;
  border-radius: 5px;
  z-index: 999;

  ul {
    width: 50px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    li {
      position: relative;
      cursor: pointer;
      width: 60px;
      height: 60px;
      border-radius: 5px;
      box-sizing: border-box;
      background-color: #f7f7f7;

      svg {
        position: absolute;
        top: 50%;
        margin-top: -20px;
        left: 50%;
        margin-left: -20px;
      }
    }
  }
}
</style>
